<!DOCTYPE html>
<html>
<head>
<title>Test Dynamic</title>
<meta name="viewport" 
      content="width=device-width, initial-scale=1">	
<link rel="stylesheet" 
      href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" 
        src="http://code.jquery.com/jquery-2.1.3.min.js">
</script>
<script type="text/javascript" 
        src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>

<body>

<div data-role="page" id="homepage">

	<div data-role="header">
		<h1>Dynamic Pages</h1>
	</div>
	
	<div role="main" class="ui-content">

		<ul id="peopleList" data-role="listview" data-inset="true"></ul>

		
	</div>

</div>


<script>

$("#homepage").bind("pagebeforecreate", function(e) {
	//load in our people
	$.get("people.json", {}, function(res,code) {
		var s = "";
		for (var i = 0; i < res.length; i++) {
			s+="<li><a href='test_people.html?id="+res[i].id+"'>"+
			res[i].name+"</a></li>";
		}
		$("#peopleList").html(s).listview("refresh");
	}, "json");
	
});

$(document).on("pagecontainerbeforeshow", function(e) {
	console.log('pagecontainerbeforeshow');
	
	var page = $.mobile.pageContainer.pagecontainer("getActivePage")[0];
	var parts = $.mobile.path.parseLocation();
	if(parts.pathname.indexOf("test_people") >= 0) {
		
		var thisId = parts.search.split("=")[1];
		$.get("person"+thisId+".json", {}, function(res, code) {
			$("h1",page).text(res.name);	
			s = "<p>"+res.name+
			" is a "+res.gender+" and likes "+res.hobbies+"</p>";
			$("#contentArea", page).html(s);
		}, "json");

	}
	
});
</script>

</body>
</html>
